<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>VUE2个人摘抄知识点- | ETHAN&#39;s Blog </title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/ethanBlogs/favicon.ico">
    <meta name="description" content=" 对 JavaScript 情有独钟 ~ ">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/ethanBlogs/assets/css/0.styles.2aa58c37.css" as="style"><link rel="preload" href="/ethanBlogs/assets/js/app.41cfd4b1.js" as="script"><link rel="preload" href="/ethanBlogs/assets/js/3.30c6e821.js" as="script"><link rel="preload" href="/ethanBlogs/assets/js/1.ff0e4a20.js" as="script"><link rel="preload" href="/ethanBlogs/assets/js/22.4823be3f.js" as="script"><link rel="prefetch" href="/ethanBlogs/assets/js/10.5818770a.js"><link rel="prefetch" href="/ethanBlogs/assets/js/11.a80cfea6.js"><link rel="prefetch" href="/ethanBlogs/assets/js/12.487e572c.js"><link rel="prefetch" href="/ethanBlogs/assets/js/13.ac8db77e.js"><link rel="prefetch" href="/ethanBlogs/assets/js/14.02537dd1.js"><link rel="prefetch" href="/ethanBlogs/assets/js/15.826f7a25.js"><link rel="prefetch" href="/ethanBlogs/assets/js/16.bf53758a.js"><link rel="prefetch" href="/ethanBlogs/assets/js/17.634aa983.js"><link rel="prefetch" href="/ethanBlogs/assets/js/18.9903bbbd.js"><link rel="prefetch" href="/ethanBlogs/assets/js/19.0d127aae.js"><link rel="prefetch" href="/ethanBlogs/assets/js/20.a231df0a.js"><link rel="prefetch" href="/ethanBlogs/assets/js/21.73137a1f.js"><link rel="prefetch" href="/ethanBlogs/assets/js/4.74080337.js"><link rel="prefetch" href="/ethanBlogs/assets/js/5.f95d4eaf.js"><link rel="prefetch" href="/ethanBlogs/assets/js/6.c87f8fa0.js"><link rel="prefetch" href="/ethanBlogs/assets/js/7.fa249a34.js"><link rel="prefetch" href="/ethanBlogs/assets/js/8.53360952.js"><link rel="prefetch" href="/ethanBlogs/assets/js/9.4e81e732.js">
    <link rel="stylesheet" href="/ethanBlogs/assets/css/0.styles.2aa58c37.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar" data-v-1aefc0b4><div data-v-1aefc0b4><div id="loader-wrapper" class="loading-wrapper" data-v-d48f4d20 data-v-1aefc0b4 data-v-1aefc0b4><div class="loader-main" data-v-d48f4d20><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-25ba6db2 data-v-1aefc0b4 data-v-1aefc0b4><h3 class="title" data-v-25ba6db2 data-v-25ba6db2>ETHAN's Blog </h3> <p class="description" data-v-25ba6db2 data-v-25ba6db2> 对 JavaScript 情有独钟 ~ </p> <label id="box" class="inputBox" data-v-25ba6db2 data-v-25ba6db2><input type="password" value="" data-v-25ba6db2> <span data-v-25ba6db2>Konck! Knock!</span> <button data-v-25ba6db2>OK</button></label> <div class="footer" data-v-25ba6db2 data-v-25ba6db2><span data-v-25ba6db2><i class="iconfont reco-theme" data-v-25ba6db2></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-25ba6db2>vuePress-theme-reco</a></span> <span data-v-25ba6db2><i class="iconfont reco-copyright" data-v-25ba6db2></i> <a data-v-25ba6db2><span data-v-25ba6db2>ETHAN</span>
            
          <span data-v-25ba6db2>2017 - </span>
          2022
        </a></span></div></div> <div class="hide" data-v-1aefc0b4><header class="navbar" data-v-1aefc0b4><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/ethanBlogs/" class="home-link router-link-active"><img src="/ethanBlogs/logo.png" alt="ETHAN's Blog " class="logo"> <span class="site-name">ETHAN's Blog </span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/ethanBlogs/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ethanBlogs/categories/category1/" class="nav-link"><i class="undefined"></i>
  category1
</a></li><li class="dropdown-item"><!----> <a href="/ethanBlogs/categories/category2/" class="nav-link"><i class="undefined"></i>
  category2
</a></li></ul></div></div><div class="nav-item"><a href="/ethanBlogs/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/ethanBlogs/timeline1/" class="nav-link"><i class="iconfont reco-date"></i>
  回忆线
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      工具
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ethanBlogs/docs/theme-reco/" class="nav-link"><i class="undefined"></i>
  vuepress-reco
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      联系
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/recoluan" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-1aefc0b4></div> <aside class="sidebar" data-v-1aefc0b4><div class="personal-info-wrapper" data-v-39576ba9 data-v-1aefc0b4><img src="/ethanBlogs/avatar.png" alt="author-avatar" class="personal-img" data-v-39576ba9> <h3 class="name" data-v-39576ba9>
    ETHAN
  </h3> <div class="num" data-v-39576ba9><div data-v-39576ba9><h3 data-v-39576ba9>12</h3> <h6 data-v-39576ba9>Articles</h6></div> <div data-v-39576ba9><h3 data-v-39576ba9>4</h3> <h6 data-v-39576ba9>Tags</h6></div></div> <ul class="social-links" data-v-39576ba9></ul> <hr data-v-39576ba9></div> <nav class="nav-links"><div class="nav-item"><a href="/ethanBlogs/" class="nav-link"><i class="iconfont reco-home"></i>
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-category"></i>
      分类
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ethanBlogs/categories/category1/" class="nav-link"><i class="undefined"></i>
  category1
</a></li><li class="dropdown-item"><!----> <a href="/ethanBlogs/categories/category2/" class="nav-link"><i class="undefined"></i>
  category2
</a></li></ul></div></div><div class="nav-item"><a href="/ethanBlogs/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/ethanBlogs/timeline1/" class="nav-link"><i class="iconfont reco-date"></i>
  回忆线
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      工具
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ethanBlogs/docs/theme-reco/" class="nav-link"><i class="undefined"></i>
  vuepress-reco
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>
      联系
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://github.com/recoluan" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav> <!----> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-25ba6db2 data-v-1aefc0b4><h3 class="title" data-v-25ba6db2 data-v-25ba6db2>VUE2个人摘抄知识点-</h3> <!----> <label id="box" class="inputBox" data-v-25ba6db2 data-v-25ba6db2><input type="password" value="" data-v-25ba6db2> <span data-v-25ba6db2>Konck! Knock!</span> <button data-v-25ba6db2>OK</button></label> <div class="footer" data-v-25ba6db2 data-v-25ba6db2><span data-v-25ba6db2><i class="iconfont reco-theme" data-v-25ba6db2></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-25ba6db2>vuePress-theme-reco</a></span> <span data-v-25ba6db2><i class="iconfont reco-copyright" data-v-25ba6db2></i> <a data-v-25ba6db2><span data-v-25ba6db2>ETHAN</span>
            
          <span data-v-25ba6db2>2017 - </span>
          2022
        </a></span></div></div> <div data-v-1aefc0b4><main class="page"><section><div class="page-title"><h1 class="title">VUE2个人摘抄知识点-</h1> <div data-v-f875f3fc><i class="iconfont reco-account" data-v-f875f3fc><span data-v-f875f3fc>ETHAN</span></i> <i class="iconfont reco-date" data-v-f875f3fc><span data-v-f875f3fc>1/1/2022</span></i> <!----> <!----></div></div> <div class="theme-reco-content content__default"><h1 id=""><a href="#" class="header-anchor">#</a></h1> <p>切换taobao源下载</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>npm i <span class="token operator">-</span>g @vue<span class="token operator">/</span>cli <span class="token operator">--</span>registry<span class="token operator">=</span>https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>registry<span class="token punctuation">.</span>npm<span class="token punctuation">.</span>taobao<span class="token punctuation">.</span>org
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="vue-cli脚手架"><a href="#vue-cli脚手架" class="header-anchor">#</a> @vue/cli脚手架</h2> <h4 id="打包"><a href="#打包" class="header-anchor">#</a> 打包</h4> <p>vue.config.js</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>module.exports={
	publicPath:&quot;./&quot;
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="全局安装命令"><a href="#全局安装命令" class="header-anchor">#</a> 全局安装命令</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code>yarn global add @vue<span class="token operator">/</span>cli
# <span class="token constant">OR</span>
npm install <span class="token operator">-</span>g @vue<span class="token operator">/</span>cli
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>注意: 如果半天没动静(95%都是网速问题), 可以ctrl c</p> <ol><li><p>停止重新来</p></li> <li><p>换一个网继续重来</p></li></ol> <ul><li>查看<code>vue</code>脚手架版本</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>vue <span class="token operator">-</span><span class="token constant">V</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="vue-cli-创建项目启动服务"><a href="#vue-cli-创建项目启动服务" class="header-anchor">#</a> @vue/cli 创建项目启动服务</h2> <h3 id="创建项目"><a href="#创建项目" class="header-anchor">#</a> 创建项目</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code># vue和create是命令<span class="token punctuation">,</span> vuecli<span class="token operator">-</span>demo是文件夹名
vue create vuecli<span class="token operator">-</span>demo  <span class="token comment">//英文不能大写</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h4 id="选择模板"><a href="#选择模板" class="header-anchor">#</a> 选择模板</h4> <p>==可以上下箭头选择, 弄错了ctrl+c重来==</p> <p>回车等待生成项目文件夹+文件+下载必须的第三方包们</p> <p>进入脚手架项目下, 启动内置的热更新本地服务器</p> <h4 id="热更新"><a href="#热更新" class="header-anchor">#</a> 热更新</h4> <p>只要看到绿色的 - 啊. 你成功了(底层node+webpack热更新服务)</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>cd vuecil<span class="token operator">-</span>demo

npm run serve
# 或
yarn serve
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="vue-cli-目录和代码分析"><a href="#vue-cli-目录和代码分析" class="header-anchor">#</a> @vue/cli 目录和代码分析</h2> <p>目标: 讲解重点文件夹, 文件的作用, 以及文件里代码的意思</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> vuecil<span class="token operator">-</span>demo        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── <span class="token keyword">public</span>       # 静态文件目录
      ├── favicon<span class="token punctuation">.</span>ico# 浏览器小图标
      └── index<span class="token punctuation">.</span>html # <span class="token function">单页面的html文件</span><span class="token punctuation">(</span>网页浏览的是它<span class="token punctuation">)</span>
    ├── src          # 业务文件夹
      ├── assets     # 静态资源
        └── logo<span class="token punctuation">.</span>png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld<span class="token punctuation">.</span>vue # 欢迎页面vue代码文件 
      ├── App<span class="token punctuation">.</span>vue    # 整个应用的根组件
      └── main<span class="token punctuation">.</span>js    # 入口js文件
    ├── <span class="token punctuation">.</span>gitignore   # git提交忽略配置
    ├── babel<span class="token punctuation">.</span>config<span class="token punctuation">.</span>js  # babel配置
    ├── <span class="token keyword">package</span><span class="token punctuation">.</span>json  # 依赖包列表
    ├── <span class="token constant">README</span><span class="token punctuation">.</span>md    # 项目说明
	└── yarn<span class="token punctuation">.</span>lock    # 项目包版本锁定和缓存地址
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>主要文件及含义</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>node_modules下都是下载的第三方包
<span class="token keyword">public</span><span class="token operator">/</span>index<span class="token punctuation">.</span>html – 浏览器运行的网页
src<span class="token operator">/</span>main<span class="token punctuation">.</span>js – webpack打包的入口文件
src<span class="token operator">/</span>App<span class="token punctuation">.</span>vue – vue项目入口页面
<span class="token keyword">package</span><span class="token punctuation">.</span>json – 依赖包列表文件
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="vue-cli-自定义配置"><a href="#vue-cli-自定义配置" class="header-anchor">#</a> @vue/cli 自定义配置</h2> <blockquote><p>目标：项目中没有webpack.config.js文件，因为@vue/cli用的vue.config.js</p></blockquote> <p>src并列处新建vue.config.js</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/* 覆盖webpack的配置 */</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  devServer<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 自定义服务配置</span>
    open<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动打开浏览器</span>
    port<span class="token operator">:</span> <span class="token number">3000</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="关闭eslint错误提示"><a href="#关闭eslint错误提示" class="header-anchor">#</a> 关闭eslint错误提示</h2> <p>vue.config.js</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>lintOnSave:false //关闭
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="指令"><a href="#指令" class="header-anchor">#</a> 指令</h2> <p><strong>vue指令, 实质上就是特殊的 html 标签属性, 特点:  v- 开头</strong></p> <p>每个指令, 都有独立的作用,</p> <p>以v-开头的标签属性叫指令</p> <p>作用:	拓展标签的功能</p> <h3 id="vue指令-v-bind"><a href="#vue指令-v-bind" class="header-anchor">#</a> vue指令-v-bind</h3> <h6 id="设置标签属性的值可表达式"><a href="#设置标签属性的值可表达式" class="header-anchor">#</a> 设置标签属性的值可表达式</h6> <ul><li>语法：<code>v-bind:属性名=&quot;vue变量&quot;</code></li> <li>简写：<code>:属性名=&quot;vue变量&quot;</code></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> vue指令<span class="token operator">-</span>v<span class="token operator">-</span>bind属性动态赋值 <span class="token operator">--</span><span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>a v<span class="token operator">-</span>bind<span class="token operator">:</span>href<span class="token operator">=</span><span class="token string">&quot;url&quot;</span><span class="token operator">&gt;</span>我是a标签<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>img <span class="token operator">:</span>src<span class="token operator">=</span><span class="token string">&quot;imgSrc&quot;</span><span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="vue指令-v-on"><a href="#vue指令-v-on" class="header-anchor">#</a> vue指令-v-on</h3> <h6 id="给标签绑定事件"><a href="#给标签绑定事件" class="header-anchor">#</a> 给标签绑定事件</h6> <ul><li>语法
<ul><li>v-on:事件名=&quot;要执行的==少量代码==&quot;</li> <li>v-on:事件名=&quot;methods中的函数&quot;</li> <li>v-on:事件名=&quot;methods中的函数(实参)&quot;</li></ul></li> <li>简写: **@**事件名=&quot;<strong>methods</strong>中的函数&quot;</li></ul> <div class="language- line-numbers-mode"><pre class="language-text"><code>函数写在methods中
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="v-on鼠标修饰符"><a href="#v-on鼠标修饰符" class="header-anchor">#</a> v-on鼠标修饰符</h4> <h6 id="阻止事件行为"><a href="#阻止事件行为" class="header-anchor">#</a> 阻止事件行为</h6> <blockquote><p>目的: 在事件后面.修饰符名 - 给事件带来更强大的功能</p></blockquote> <ul><li>语法:
<ul><li>@事件名.修饰符=&quot;methods里函数&quot;
<ul><li><strong>native</strong>	支持组件原生事件</li> <li>.stop - 阻止事件冒泡</li> <li>.prevent - 阻止默认行为</li> <li>.once - 程序运行期间, 只触发一次事件处理函数</li> <li>capture：使用事件的捕获模式；</li> <li>只有event.target是当前操作的元素时才触发事件；</li> <li>passive：事件的默认行为立即执行，无需等待事件回调执行完毕；</li></ul></li></ul></li></ul> <p><strong>可并用原生写法在函数用阻止,有传参要在标签用($event),无传参</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>a @click<span class="token operator">=</span><span class="token string">&quot;one&quot;</span> href<span class="token operator">=</span><span class="token string">&quot;www.baidu.com&quot;</span><span class="token operator">&gt;</span>无传参阻止跳转<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>a v<span class="token operator">-</span>on<span class="token operator">:</span>click<span class="token operator">=</span><span class="token string">&quot;two(10, $event)&quot;</span> href<span class="token operator">=</span><span class="token string">&quot;www.baidu.com&quot;</span><span class="token operator">&gt;</span>有传参<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span>
<span class="token function">one</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment">//无传参</span>
      e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">two</span><span class="token punctuation">(</span><span class="token parameter">num<span class="token punctuation">,</span> e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token comment">//有传参</span>
      e<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h4 id="v-on按键修饰符"><a href="#v-on按键修饰符" class="header-anchor">#</a> v-on按键修饰符</h4> <h6 id="键盘事件修饰符"><a href="#键盘事件修饰符" class="header-anchor">#</a> 键盘事件修饰符</h6> <blockquote><p>目标: 给键盘事件, 添加修饰符, 增强能力</p></blockquote> <ul><li>语法:
<ul><li>@keyup.enter  -  监测回车按键</li> <li>@keyup.esc     -   监测返回按键</li></ul></li></ul> <div class="language- line-numbers-mode"><pre class="language-text"><code>回车 =&gt; enter
删除 =&gt; delete (捕获“删除”和“退格”键)
退出 =&gt; esc
空格 =&gt; space
换行 =&gt; tab (特殊，必须配合keydown去使用)
上 =&gt;up		下 =&gt;down	左 =&gt;left	右 =&gt;right
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名</p> <h3 id="vue指令-v-model"><a href="#vue指令-v-model" class="header-anchor">#</a> vue指令 v-model</h3> <blockquote><p>目标: 把value属性和vue数据变量, 双向绑定到一起</p></blockquote> <ul><li>语法: v-model=&quot;vue数据变量&quot;</li> <li>双向数据绑定
<ul><li>数据变化 -&gt; 视图自动同步</li> <li>视图变化 -&gt; 数据自动同步</li></ul></li></ul> <h6 id="复选框"><a href="#复选框" class="header-anchor">#</a> 复选框</h6> <ul><li>当v-model绑定的变量:</li> <li>非数组的时候:hobby变量和复选框的checked属性双向绑定在一起了</li> <li>数组的时候:hobby变量和复选框的value属性双向绑定一起</li></ul> <h4 id="v-model修饰符"><a href="#v-model修饰符" class="header-anchor">#</a> v-model修饰符</h4> <blockquote><p>目标: 让v-model拥有更强大的功能</p></blockquote> <ul><li>语法:
<ul><li>v-model.修饰符=&quot;vue数据变量&quot;
<ul><li>.number   以parseFloat转成数字类型</li> <li>.trim          去除首尾空白字符</li> <li>.lazy           在change时触发而非inupt时</li></ul></li></ul></li></ul> <h3 id="vue指令-v-text和v-html"><a href="#vue指令-v-text和v-html" class="header-anchor">#</a> vue指令 v-text和v-html</h3> <blockquote><p>目的: 更新DOM对象的innerText/innerHTML</p></blockquote> <ul><li>语法:
<ul><li>v-text=&quot;vue数据变量&quot;</li> <li>v-html=&quot;vue数据变量&quot;</li></ul></li> <li><strong>注意: 会覆盖插值表达式</strong></li></ul> <h3 id="vue指令-v-show和v-if"><a href="#vue指令-v-show和v-if" class="header-anchor">#</a> vue指令 v-show和v-if</h3> <blockquote><p>目标: 控制标签的隐藏或出现</p></blockquote> <ul><li>语法:
<ul><li>v-show=&quot;vue变量&quot;</li> <li>v-if=&quot;vue变量&quot;</li></ul></li> <li>原理
<ul><li>v-show <strong>用的display:none隐藏   (频繁切换使用)</strong></li> <li>v-if  <strong>直接从DOM树上移除</strong></li></ul></li> <li>高级
<ul><li>v-else使用</li></ul></li></ul> <p>安装less和less-loader</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>yarn add less@3.0.4 less-loader@5.0.0 -D
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="vue指令-v-for"><a href="#vue指令-v-for" class="header-anchor">#</a> vue指令-v-for</h3> <ul><li><p>语法</p> <ul><li>v-for=&quot;(值, 索引) in 目标结构&quot;</li> <li>v-for=&quot;值 in 目标结构&quot;</li></ul></li> <li><p>目标结构:</p> <ul><li>可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)</li></ul></li> <li><p>注意:</p> <p>v-for的临时变量名不能用到v-for范围外</p></li></ul> <p>可以通过this.$set改变数组 this.$set( target, key, value )</p> <h2 id="动态设置标签类名"><a href="#动态设置标签类名" class="header-anchor">#</a> 动态设置标签类名</h2> <h6 id="动态显示"><a href="#动态显示" class="header-anchor">#</a> 动态显示</h6> <div class="language- line-numbers-mode"><pre class="language-text"><code>:class=&quot;{类名,布尔值}&quot;
当布尔值为true的时候 使用此类名
动态改变属性名:[attr]=&quot;{ }&quot;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h6 id="动态样式设置"><a href="#动态样式设置" class="header-anchor">#</a> 动态样式设置</h6> <div class="language- line-numbers-mode"><pre class="language-text"><code>:style=&quot;{css设置名:值}&quot;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language- line-numbers-mode"><pre class="language-text"><code>1. class样式
	写法:class=&quot;xxx&quot; xxx可以是字符串、对象、数组。
	字符串写法适用于：类名不确定，要动态获取。
	对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
	数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2. style样式
	:style=&quot;{fontSize: xxx}&quot;其中xxx是动态值。
	:style=&quot;[a,b]&quot;其中a、b是样式对象。
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="vue过滤器-定义使用"><a href="#vue过滤器-定义使用" class="header-anchor">#</a> vue过滤器-定义使用</h2> <p>过滤器只能用在, ==插值表达式和v-bind表达式==</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>  语法: {{ 值 | 过滤器名字 }}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h5 id="全局定义"><a href="#全局定义" class="header-anchor">#</a> 全局定义</h5> <p>Vue.filter(&quot;过滤器名&quot;, (值) =&gt; {return &quot;返回处理后的值&quot;})</p> <h5 id="局部定义"><a href="#局部定义" class="header-anchor">#</a> 局部定义</h5> <p>filters: {过滤器名字: (值) =&gt; {return &quot;返回处理后的值&quot;}</p> <h5 id="传参和多过滤器"><a href="#传参和多过滤器" class="header-anchor">#</a> 传参和多过滤器</h5> <blockquote><p>目标: 可同时使用多个过滤器, 或者给过滤器传参</p></blockquote> <ul><li>过滤器传参:   vue变量 | 过滤器(实参)</li> <li>多个过滤器:   vue变量 | 过滤器1 | 过滤器2</li></ul> <p>JavaScript <strong>日期处理类库</strong></p> <p><a href="http://momentjs.cn/" target="_blank" rel="noopener noreferrer"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="vue计算属性-computed"><a href="#vue计算属性-computed" class="header-anchor">#</a> vue计算属性-computed</h2> <p><strong>当变量值,依赖其他变量计算而来才用</strong></p> <p>计算属性会自动计算结果,当用户多次使用同一个计算属性的时候,</p> <p>第二次之后的所有计算数学的值都是从第一个缓存中的结果中获取,不再重复执行</p> <p>带缓冲,提高了性能</p> <h5 id="简写语法"><a href="#简写语法" class="header-anchor">#</a> 简写语法:</h5> <blockquote><p>目标: 一个数据, 依赖另外一些数据计算而来的结果</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code>computed<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;计算属性名&quot;</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token string">&quot;值&quot;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h5 id="完整语法"><a href="#完整语法" class="header-anchor">#</a> 完整语法:</h5> <p>目标: 计算属性也是变量, 如果想要直接赋值, 需要使用完整写法</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>computed<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;属性名&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function">set</span><span class="token punctuation">(</span>值<span class="token punctuation">)</span><span class="token punctuation">{</span>
            获取值
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 设置值
            <span class="token keyword">return</span> <span class="token string">&quot;值&quot;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h2 id="vue侦听器-watch"><a href="#vue侦听器-watch" class="header-anchor">#</a> vue侦听器-watch</h2> <blockquote><p>目标: 可以侦听data/computed属性值改变</p></blockquote> <p>语法:</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>watch: {
    &quot;被侦听的属性名&quot; (newVal, oldVal){
        
    }
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h5 id="深度侦听和立即执行"><a href="#深度侦听和立即执行" class="header-anchor">#</a> 深度侦听和立即执行</h5> <blockquote><p>目标: 侦听复杂类型, 或者立即执行侦听函数</p></blockquote> <ul><li>语法:</li> <li>对象就要深度侦听</li></ul> <div class="language- line-numbers-mode"><pre class="language-text"><code>watch: {
    &quot;要侦听的属性名&quot;: {
        immediate: true, // 立即执行
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="vue组件"><a href="#vue组件" class="header-anchor">#</a> vue组件</h2> <h5 id="局部-注册使用"><a href="#局部-注册使用" class="header-anchor">#</a> 局部 - 注册使用</h5> <div class="language- line-numbers-mode"><pre class="language-text"><code>import 组件对象 from 'vue文件路径'

export default {
    components: {
        &quot;组件名&quot;: 组件对象
    }
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h5 id="全局-注册使用"><a href="#全局-注册使用" class="header-anchor">#</a> 全局 - 注册使用</h5> <div class="language- line-numbers-mode"><pre class="language-text"><code>import Vue from 'vue'
import 组件对象 from 'vue文件路径'

Vue.component(&quot;组件名&quot;, 组件对象)
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>如果子组件只有一个根元素就可以直接在父组件上写标签属性</strong></p> <h2 id="vue组件-scoped作用"><a href="#vue组件-scoped作用" class="header-anchor">#</a> vue组件-scoped作用</h2> <blockquote><p>目的: 解决多个组件样式名相同, 冲突问题</p></blockquote> <p>需求: div标签名选择器, 设置背景色</p> <p>问题: 发现组件里的div和外面的div都生效了</p> <p>解决: 给Pannel.vue组件里style标签上加scoped属性即可</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性</p> <p>而且必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到</p> <h2 id="vue组件通信"><a href="#vue组件通信" class="header-anchor">#</a> vue组件通信</h2> <h5 id="父传子数据"><a href="#父传子数据" class="header-anchor">#</a> 父传子数据</h5> <p>因为每个组件的变量和值都是独立的</p> <p>组件通信先暂时关注父传子, 子传父</p> <p>父: 使用其他组件的vue文件</p> <p>子: 被引入的组件(嵌入)</p> <p>例如: App.vue(父)  MyProduct.vue(子)</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>目标<span class="token operator">:</span> <span class="token function">父</span><span class="token punctuation">(</span>App<span class="token punctuation">.</span>vue<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">&gt;</span> <span class="token function">子</span><span class="token punctuation">(</span>MyProduct<span class="token punctuation">.</span>vue<span class="token punctuation">)</span> 分别传值进入
需求<span class="token operator">:</span> 每次组件显示不同的数据信息
<span class="token function">步骤</span><span class="token punctuation">(</span>口诀<span class="token punctuation">)</span><span class="token operator">:</span>
        <span class="token number">1.</span> 子组件 <span class="token operator">-</span> props <span class="token operator">-</span> <span class="token function">变量</span> <span class="token punctuation">(</span>准备接收<span class="token punctuation">)</span>
        <span class="token number">2.</span> 父组件 <span class="token operator">-</span> 传值进去
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="组件自定义事件"><a href="#组件自定义事件" class="header-anchor">#</a> 组件自定义事件</h2> <h5 id="子传父传递"><a href="#子传父传递" class="header-anchor">#</a> 子传父传递</h5> <ul><li>父: @自定义事件名=&quot;父methods函数&quot;</li> <li>子: this.$emit(&quot;自定义事件名&quot;, 传值) - 执行父methods里函数代码</li></ul> <p>父亲</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>生成  @自定义事件名=&quot;函数接收&quot;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>儿子</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>函数传 
this.$emit('自定义事件名',携带的值传递的值)
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>总结: 父自定义事件和方法, 等待子组件触发事件给方法传值</p> <h2 id="事件总线"><a href="#事件总线" class="header-anchor">#</a> 事件总线</h2> <h5 id="兄弟传递"><a href="#兄弟传递" class="header-anchor">#</a> 兄弟传递</h5> <h3 id="eventbus"><a href="#eventbus" class="header-anchor">#</a> eventBus</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>import Vue from 'vue'
// 导出空白vue对象
export default new Vue()
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>组件创建完毕, 监听send事件</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>  created() {
    eventBus.$on(&quot;send&quot;, (index, price) =&gt; {
      this.arr[index].proprice &gt; 1 &amp;&amp;
        (this.arr[index].proprice = (this.arr[index].proprice - price).toFixed(2));
    });
  },
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="生命周期"><a href="#生命周期" class="header-anchor">#</a> 生命周期</h2> <h5 id="初始化阶段"><a href="#初始化阶段" class="header-anchor">#</a> 初始化阶段</h5> <p>beforeCreated()		此阶段获取不到data的数据</p> <p>created()	获取到数据了,在这里<strong>一般用Ajax请求</strong> 获取不到真实dom</p> <h5 id="挂载阶段"><a href="#挂载阶段" class="header-anchor">#</a> 挂载阶段</h5> <p>beforeMount() 挂载之前触发,内存挂载</p> <p>mounted()挂载完毕之后触发,挂载到页面了</p> <h5 id="更新阶段"><a href="#更新阶段" class="header-anchor">#</a> 更新阶段</h5> <p>beforeUpdate() dom更新前旧数据 ****</p> <p>updated()	dom更新后新数据</p> <h5 id="销毁阶段"><a href="#销毁阶段" class="header-anchor">#</a> 销毁阶段</h5> <p>beforeDestroy() 销毁前 <strong>一般用来清除全局监听事件</strong></p> <p>destroyed()销毁后触发</p> <p>$destroy()销毁new实例    $off()销毁事件</p> <h2 id="axios请求"><a href="#axios请求" class="header-anchor">#</a> axios请求</h2> <p>专门用于发送aja请求的库</p> <p><a href="http://www.axios-js.com/" target="_blank" rel="noopener noreferrer">axios文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>特点</p> <ul><li>支持客户端发送Ajax请求</li> <li>支持服务端Node.js发送请求</li> <li><strong>支持Promise相关用法</strong></li> <li>支持请求和响应的拦截器功能</li> <li><strong>自动转换JSON数据发送</strong></li> <li>axios 底层还是原生js实现, 内部通过<strong>Promise</strong>封装的</li></ul> <h5 id="axios的基本使用"><a href="#axios的基本使用" class="header-anchor">#</a> axios的基本使用</h5> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">axios</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  method<span class="token operator">:</span> <span class="token string">'请求方式'</span><span class="token punctuation">,</span> <span class="token comment">// get post</span>
  url<span class="token operator">:</span> <span class="token string">'请求地址'</span><span class="token punctuation">,</span>
  data<span class="token operator">:</span> <span class="token punctuation">{</span>    <span class="token comment">// 拼接到请求体的参数,  post请求的参数</span>
    xxx<span class="token operator">:</span> xxx<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  params<span class="token operator">:</span> <span class="token punctuation">{</span>  <span class="token comment">// 拼接到请求行的参数, get请求的参数</span>
   	xxx<span class="token operator">:</span> xxx 
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token comment">// 后台返回的结果</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token comment">// 后台报错返回</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h4 id="封装全局配置"><a href="#封装全局配置" class="header-anchor">#</a> 封装全局配置</h4> <p>目标: 避免前缀基地址, 暴露在逻辑页面里, 统一设置</p> <h5 id="设置请求基础路径"><a href="#设置请求基础路径" class="header-anchor">#</a> 设置请求基础路径</h5> <p>utils文件夹下创建request.js</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">&quot;axios&quot;</span>
axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">'https://www.escook.cn'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> axios
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h5 id="封装请求接口回调"><a href="#封装请求接口回调" class="header-anchor">#</a> 封装请求接口回调</h5> <p>在api/books.js中</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">&quot;../utils/request&quot;</span><span class="token punctuation">;</span>

方法一
<span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token function-variable function">cartList</span> <span class="token operator">=</span> <span class="token parameter">params</span> <span class="token operator">=&gt;</span> <span class="token function">axios</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token operator">:</span> <span class="token string">&quot;/api/cart&quot;</span><span class="token punctuation">,</span>
    method<span class="token operator">:</span> <span class="token string">'get'</span><span class="token punctuation">,</span>
    params
<span class="token punctuation">}</span><span class="token punctuation">)</span>
方法二
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getBook</span><span class="token punctuation">(</span><span class="token parameter">params</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">axios</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        url<span class="token operator">:</span> <span class="token string">&quot;/api/getbooks&quot;</span><span class="token punctuation">,</span>
        method<span class="token operator">:</span> <span class="token string">&quot;get&quot;</span><span class="token punctuation">,</span>
        params
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>


</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h5 id="引入封装-使用请求"><a href="#引入封装-使用请求" class="header-anchor">#</a> 引入封装,使用请求</h5> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> cartList <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;./api/cart&quot;</span><span class="token punctuation">;</span>


<span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">cartList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p><img src="C:%5CUsers%5Cethan%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20210902145200488.png" alt="image-20210902145200488"></p> <p>基础写法</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">&quot;http://123.57.109.30:3006&quot;</span>

<span class="token comment">// 所有请求的url前置可以去掉, 请求时, axios会自动拼接baseURL的地址在前面</span>
<span class="token function">getAllFn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">axios</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        url<span class="token operator">:</span> <span class="token string">&quot;/api/getbooks&quot;</span><span class="token punctuation">,</span>
        method<span class="token operator">:</span> <span class="token string">&quot;GET&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 默认就是GET方式请求, 可以省略不写</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// axios()-原地得到Promise对象</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><h2 id="nexttick和-refs"><a href="#nexttick和-refs" class="header-anchor">#</a> $nextTick和$refs</h2> <p>目标: 利用 ref 和 $refs 可以用于获取 dom 元素</p> <p>总结: 通过id / ref, 都可以获取原生DOM标签</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token operator">&lt;</span>h1 id<span class="token operator">=</span><span class="token string">&quot;h&quot;</span> ref<span class="token operator">=</span><span class="token string">&quot;myH&quot;</span><span class="token operator">&gt;</span>我是一个孤独可怜又能吃的h1<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>myH<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// h1</span>
   console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>myH<span class="token punctuation">.</span>fn<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// fn</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h5 id="nexttick使用"><a href="#nexttick使用" class="header-anchor">#</a> $nextTick使用</h5> <p>目标: 获取组件对象, 调用组件里方法</p> <blockquote><h4 id="vue更新dom-异步的"><a href="#vue更新dom-异步的" class="header-anchor">#</a> Vue更新DOM-异步的</h4></blockquote> <blockquote><p>目标: 点击count++, 马上通过&quot;原生DOM&quot;拿标签内容, 无法拿到新值</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">// 原因: Vue更新DOM异步</span>
<span class="token comment">// 解决: this.$nextTick()</span>
<span class="token comment">// 过程: DOM更新完会挨个触发$nextTick里的函数体</span>
             <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>myP<span class="token punctuation">.</span>innerHTML<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="props类型的校验"><a href="#props类型的校验" class="header-anchor">#</a> props类型的校验</h2> <p>目的: 头部的标题, 颜色, 背景色可以随便修改, props类型的校验</p> <p>子组件</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> props<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//外部插入的变量值必须是字符串</span>
    bgcolor<span class="token operator">:</span> String<span class="token punctuation">,</span>
    color<span class="token operator">:</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> String<span class="token punctuation">,</span> <span class="token comment">//约束color值的类型</span>
      <span class="token keyword">default</span><span class="token operator">:</span> <span class="token string">&quot;#0a0&quot;</span><span class="token punctuation">,</span> <span class="token comment">//默认是绿色</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    title<span class="token operator">:</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> String<span class="token punctuation">,</span> <span class="token comment">//约束title值的类型</span>
      require<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//必须传入变量</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
      
       props<span class="token operator">:</span> <span class="token punctuation">{</span>
    Lists<span class="token operator">:</span> <span class="token punctuation">{</span>
      type<span class="token operator">:</span> Array<span class="token punctuation">,</span>
      <span class="token comment">// 自定义校验规则</span>
      <span class="token function">validator</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> value<span class="token punctuation">.</span>length <span class="token operator">&gt;=</span> <span class="token number">2</span> <span class="token operator">&amp;&amp;</span> value<span class="token punctuation">.</span>length <span class="token operator">&lt;=</span> <span class="token number">5</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p>父组件</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token operator">&lt;</span>MyHeader bgcolor<span class="token operator">=</span><span class="token string">&quot;red&quot;</span> color<span class="token operator">=</span><span class="token string">&quot;blue&quot;</span> title<span class="token operator">=</span><span class="token string">&quot;首页&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>MyHeader<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="组件进阶"><a href="#组件进阶" class="header-anchor">#</a> 组件进阶</h2> <h4 id="动态组件"><a href="#动态组件" class="header-anchor">#</a> 动态组件</h4> <p>目标: 多个组件使用同一个挂载点，并动态切换，这就是动态组件</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>button @click<span class="token operator">=</span><span class="token string">&quot;comName = 'UserName'&quot;</span><span class="token operator">&gt;</span>账号密码填写<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>button @click<span class="token operator">=</span><span class="token string">&quot;comName = 'UserInfo'&quot;</span><span class="token operator">&gt;</span>个人信息填写<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>

<span class="token keyword">import</span> UserName <span class="token keyword">from</span> <span class="token string">'../components/01/UserName'</span>
<span class="token keyword">import</span> UserInfo <span class="token keyword">from</span> <span class="token string">'../components/01/UserInfo'</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span>
            comName<span class="token operator">:</span> <span class="token string">&quot;UserName&quot;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    components<span class="token operator">:</span> <span class="token punctuation">{</span>
        UserName<span class="token punctuation">,</span>
        UserInfo
   
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h4 id="组件缓存"><a href="#组件缓存" class="header-anchor">#</a> 组件缓存</h4> <p>目标: 组件切换会导致组件被频繁销毁和重新创建, 性能不高</p> <p>使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁</p> <p>演示1: 可以先给UserName.vue和UserInfo.vue 注册created和destroyed生命周期事件, 观察创建和销毁过程</p> <p>演示2: 使用keep-alive内置的vue组件, 让动态组件缓存而不是销毁</p> <p>语法:</p> <p>​		Vue内置的keep-alive组件 包起来要频繁切换的组件</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> Vue内置keep<span class="token operator">-</span>alive组件<span class="token punctuation">,</span> 把包起来的组件缓存起来 <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>keep<span class="token operator">-</span>alive<span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>component <span class="token operator">:</span>is<span class="token operator">=</span><span class="token string">&quot;comName&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>component<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>keep<span class="token operator">-</span>alive<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>补充生命周期:</p> <ul><li><strong>activated</strong> - 激活</li> <li><strong>deactivated</strong> - 失去激活状态</li> <li>总结: keep-alive可以提高组件的性能, 内部包裹的标签不会被销毁和重新创建, 触发激活和非激活的生命周期方法</li></ul> <h4 id="激活和非激活"><a href="#激活和非激活" class="header-anchor">#</a> 激活和非激活</h4> <blockquote><p>目标: <strong>被缓存的组件</strong>不再创建和销毁, 而是激活和非激活</p></blockquote> <p>补充2个钩子方法名:</p> <p>​	activated – 激活时触发</p> <p>​	deactivated – 失去激活状态触发</p> <h3 id="组件插槽"><a href="#组件插槽" class="header-anchor">#</a> 组件插槽</h3> <div class="language- line-numbers-mode"><pre class="language-text"><code>v-slot:fatherContentA=&quot;childValObj&quot;
fatherContentA插槽名   childValObj变量名
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol><li>作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 <strong style="color:red;">父组件 ===&gt; 子组件</strong> 。</li> <li>分类：默认插槽、具名插槽、作用域插槽</li> <li>使用方式：</li></ol> <h4 id="默认插槽"><a href="#默认插槽" class="header-anchor">#</a> 默认插槽:</h4> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code>父组件中：
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Category</span><span class="token punctuation">&gt;</span></span>
           <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>html结构1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Category</span><span class="token punctuation">&gt;</span></span>
子组件中：
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
               <span class="token comment">&lt;!-- 定义插槽 --&gt;</span>
               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span><span class="token punctuation">&gt;</span></span>插槽默认内容...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h4 id="具名插槽"><a href="#具名插槽" class="header-anchor">#</a> 具名插槽：</h4> <p><strong>v-slot:footer简写是#</strong></p> <blockquote><p>目标: 当一个组件内有2处以上需要外部传入标签的地方</p></blockquote> <p>传入的标签可以分别派发给不同的slot位置</p> <p>要求: <strong>v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签</strong>)</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code>父组件中：
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Category</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>html结构1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name"><span class="token namespace">v-slot:</span>footer</span><span class="token punctuation">&gt;</span></span>
               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>html结构2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Category</span><span class="token punctuation">&gt;</span></span>
子组件中：
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
               <span class="token comment">&lt;!-- 定义插槽 --&gt;</span>
               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>center<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>插槽默认内容...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
               <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>footer<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>插槽默认内容...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h4 id="作用域插槽"><a href="#作用域插槽" class="header-anchor">#</a> 作用域插槽：</h4> <ol><li><p>理解：<span style="color:red;">数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。</span>（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）</p></li> <li><p>具体编码：</p></li> <li><p>scope=&quot;scopeData&quot;接收传过来的参数</p></li> <li><p>目标: 子组件里值, 在给插槽赋值时在父组件环境下使用</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code>父组件中：
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Category</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scopeData<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
				<span class="token comment">&lt;!-- 生成的是ul列表 --&gt;</span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>g in scopeData.games<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>g<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{g}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Category</span><span class="token punctuation">&gt;</span></span>

		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Category</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot-scope</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scopeData<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
				<span class="token comment">&lt;!-- 生成的是h4标题 --&gt;</span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h4</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>g in scopeData.games<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>g<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{g}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h4</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Category</span><span class="token punctuation">&gt;</span></span>
子组件中：
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>slot</span> <span class="token attr-name">:games</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>games<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>slot</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
		
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
            <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
                name<span class="token operator">:</span><span class="token string">'Category'</span><span class="token punctuation">,</span>
                props<span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'title'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                <span class="token comment">//数据在子组件自身</span>
                <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token keyword">return</span> <span class="token punctuation">{</span>
                        games<span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'红色警戒'</span><span class="token punctuation">,</span><span class="token string">'穿越火线'</span><span class="token punctuation">,</span><span class="token string">'劲舞团'</span><span class="token punctuation">,</span><span class="token string">'超级玛丽'</span><span class="token punctuation">]</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div></li></ol> <div class="language- line-numbers-mode"><pre class="language-text"><code>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="自定义指令-注册"><a href="#自定义指令-注册" class="header-anchor">#</a> 自定义指令-注册</h2> <p>目标: 获取标签, 扩展额外的功能</p> <p>// 目标: 创建 &quot;自定义指令&quot;, 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令  <strong>v-指令名</strong>
// 注意:
<strong>// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)</strong> <strong>// update方法 - 指令对应数据/标签更新时, 此方法执行</strong></p> <h4 id="全局指令"><a href="#全局指令" class="header-anchor">#</a> 全局指令</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 全局指令 - 到处&quot;直接&quot;使用</span>
Vue<span class="token punctuation">.</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string">&quot;指令名&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  <span class="token function">inserted</span><span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span>binding</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    el<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 触发标签的事件方法</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h5 id="局部指令"><a href="#局部指令" class="header-anchor">#</a> 局部指令</h5> <div class="language-js line-numbers-mode"><pre class="language-js"><code>directives<span class="token operator">:</span> <span class="token punctuation">{</span>
    指令名<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function">inserted</span><span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span>binding</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            el<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="vue-router路由"><a href="#vue-router路由" class="header-anchor">#</a> vue-router路由</h2> <h4 id="路由的基本使用"><a href="#路由的基本使用" class="header-anchor">#</a> 路由的基本使用</h4> <h6 id="下载"><a href="#下载" class="header-anchor">#</a> 下载</h6> <div class="language-js line-numbers-mode"><pre class="language-js"><code>npm i vue<span class="token operator">-</span>rooter
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h6 id="引入"><a href="#引入" class="header-anchor">#</a> 引入</h6> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> VueRoter <span class="token keyword">from</span> <span class="token string">'vue-router'</span>
<span class="token keyword">import</span> find <span class="token keyword">from</span> <span class="token string">'./views/find.vue'</span> 对应引入组件
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h6 id="注册全局组件"><a href="#注册全局组件" class="header-anchor">#</a> 注册全局组件</h6> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 在vue中，使用使用vue的插件，都需要调用Vue.use()</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueRoter<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h6 id="创建路由规则数组"><a href="#创建路由规则数组" class="header-anchor">#</a> 创建路由规则数组</h6> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">'/find'</span><span class="token punctuation">,</span>
    component<span class="token operator">:</span> find <span class="token comment">//注册路径对应需要显示的组件</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h6 id="路由规则生产路由对象"><a href="#路由规则生产路由对象" class="header-anchor">#</a> 路由规则生产路由对象</h6> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRoter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes	<span class="token comment">//注入路由</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token comment">//注入路由</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>components换成router-view</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h4 id="声明式导航"><a href="#声明式导航" class="header-anchor">#</a> 声明式导航</h4> <blockquote><p>目标: 可用全局组件router-link来替代a标签</p></blockquote> <ol><li>vue-router提供了一个全局组件 router-link</li> <li>router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)</li> <li>router-link提供了声明式导航高亮的功能(自带类名)</li></ol> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/find<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>发现音乐<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/my<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>我的音乐<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/part<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>朋友<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h5 id="跳转传参"><a href="#跳转传参" class="header-anchor">#</a> 跳转传参</h5> <blockquote><p>目标: 在跳转路由时, 可以给路由对应的组件内传值</p></blockquote> <p>在router-link上的to属性传值, 语法格式如下</p> <ul><li><p>/path?参数名=值</p></li> <li><p>/path/值 – 需要路由对象提前配置 path: “/path/参数名” [在main.js]</p></li></ul> <p>对应页面组件接收传递过来的值</p> <ul><li><p>**$route.query.**参数名</p></li> <li><p>**$route.params.**参数名</p> <p>// 配置了参数的路由称为“动态路由”
// 配置了动态路由后，访问页面的时候第一要传参数，否则范问不到
// <strong>path: &quot;/myMusic/:name?&quot;,</strong>
// 如果想要实现“不传值或者传值”都能访问组件怎么办？
// 答：<strong>在动态路由的最后面加个问号即可</strong></p></li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code>传递
<span class="token operator">&lt;</span>router<span class="token operator">-</span>link to<span class="token operator">=</span><span class="token string">&quot;/part?name=小传&quot;</span><span class="token operator">&gt;</span>朋友<span class="token operator">-</span>小传<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span>router<span class="token operator">-</span>link to<span class="token operator">=</span><span class="token string">&quot;/part/小智&quot;</span><span class="token operator">&gt;</span>朋友<span class="token operator">-</span>小智<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>接收
 <span class="token operator">&lt;</span>p<span class="token operator">&gt;</span>人名<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> $route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>name <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">--</span> <span class="token punctuation">{</span><span class="token punctuation">{</span> $route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>username <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h5 id="query参数"><a href="#query参数" class="header-anchor">#</a> query参数</h5> <ol><li><p>传递参数</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token comment">&lt;!-- 跳转并携带query参数，to的字符串写法 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home/message/detail?id=666&amp;title=你好<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>跳转<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
				
<span class="token comment">&lt;!-- 跳转并携带query参数，to的对象写法 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> 
	<span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{
		path:<span class="token punctuation">'</span>/home/message/detail<span class="token punctuation">'</span>,
		query:{
		   id:666,
            title:<span class="token punctuation">'</span>你好<span class="token punctuation">'</span>
		}
	}<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>跳转<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div></li> <li><p>接收参数：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>$route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id
$route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>title
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></li></ol> <h5 id="params参数"><a href="#params参数" class="header-anchor">#</a> params参数</h5> <ol><li><p>配置路由，声明接收params参数</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
	path<span class="token operator">:</span><span class="token string">'/home'</span><span class="token punctuation">,</span>
	component<span class="token operator">:</span>Home<span class="token punctuation">,</span>
	children<span class="token operator">:</span><span class="token punctuation">[</span>
		<span class="token punctuation">{</span>
			path<span class="token operator">:</span><span class="token string">'news'</span><span class="token punctuation">,</span>
			component<span class="token operator">:</span>News
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token punctuation">{</span>
			component<span class="token operator">:</span>Message<span class="token punctuation">,</span>
			children<span class="token operator">:</span><span class="token punctuation">[</span>
				<span class="token punctuation">{</span>
					name<span class="token operator">:</span><span class="token string">'xiangqing'</span><span class="token punctuation">,</span>
					path<span class="token operator">:</span><span class="token string">'detail/:id/:title'</span><span class="token punctuation">,</span> <span class="token comment">//使用占位符声明接收params参数</span>
					component<span class="token operator">:</span>Detail
				<span class="token punctuation">}</span>
			<span class="token punctuation">]</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div></li> <li><p>传递参数</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token comment">&lt;!-- 跳转并携带params参数，to的字符串写法 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> <span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home/message/detail/666/你好<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>跳转<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
				
<span class="token comment">&lt;!-- 跳转并携带params参数，to的对象写法 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-link</span> 
	<span class="token attr-name">:to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{
		name:<span class="token punctuation">'</span>xiangqing<span class="token punctuation">'</span>, //带name
		params:{
		   id:666,
            title:<span class="token punctuation">'</span>你好<span class="token punctuation">'</span>
		}
	}<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>跳转<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-link</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><blockquote><p>特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！</p></blockquote></li> <li><p>接收参数：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id
$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>title
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></li></ol> <h3 id="-2"><a href="#-2" class="header-anchor">#</a></h3> <h4 id="hash重定向和模式"><a href="#hash重定向和模式" class="header-anchor">#</a> hash重定向和模式</h4> <blockquote><p>目标: 匹配path后, 强制切换到目标path上</p></blockquote> <ul><li>网页打开url默认hash值是/路径</li> <li>redirect是设置要重定向到哪个路由路径</li></ul> <p>例如: 网页默认打开, 匹配路由&quot;/&quot;, 强制切换到&quot;/find&quot;上</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 默认hash值路径</span>
    redirect<span class="token operator">:</span> <span class="token string">&quot;/find&quot;</span> <span class="token comment">// 重定向到/find</span>
    <span class="token comment">// 浏览器url中#后的路径被改变成/find-重新匹配数组规则</span>
    <span class="token comment">//就是重新跳转</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><blockquote><p>总结: 强制重定向后, 还会重新来数组里匹配一次规则</p></blockquote> <h4 id="路由404页面"><a href="#路由404页面" class="header-anchor">#</a> 路由404页面</h4> <blockquote><p>目标: 如果路由hash值, 没有和数组里规则匹配</p></blockquote> <p>默认给一个404页面</p> <p>语法: 路由最后, path匹配*(任意路径) – 前面不匹配就命中最后这个, 显示对应组件页面,配置404页面规则一定要在路由规则表的最后面来进行配置</p> <p>在main.js - 修改路由配置</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> NotFound <span class="token keyword">from</span> <span class="token string">'@/views/NotFound'</span>

<span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token comment">// ...省略了其他配置</span>
  <span class="token comment">// 404在最后(规则是从前往后逐个比较path)</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">&quot;*&quot;</span><span class="token punctuation">,</span>
    component<span class="token operator">:</span> NotFound
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><blockquote><p>总结: 如果路由未命中任何规则, 给出一个兜底的404页面</p></blockquote> <h4 id="history模式"><a href="#history模式" class="header-anchor">#</a> history模式</h4> <blockquote><p>目标: 修改路由在地址栏的模式</p></blockquote> <p>hash路由例如:  http://localhost:8080/#/home</p> <p>history路由例如: http://localhost:8080/home  (以后上线需要服务器端支持, 否则找的是文件夹)</p> <p><a href="https://router.vuejs.org/zh/api/#mode" target="_blank" rel="noopener noreferrer">模式文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>router/index.js</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes<span class="token punctuation">,</span>
  mode<span class="token operator">:</span> <span class="token string">&quot;history&quot;</span> <span class="token comment">// 打包上线后需要后台支持, 模式是hash</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h4 id="js编程式导航"><a href="#js编程式导航" class="header-anchor">#</a> js编程式导航</h4> <p>目标: 用JS代码来进行跳转</p> <ul><li>编程式导航：使用js进行跳转的方式
<strong>通过path属性进行跳转</strong></li> <li>语法：this.$router.push({ path: &quot;在路由规则中定义的path的值&quot; })通过<strong>name属性进行跳转</strong>
方式二： 语法：this.$router.push({ name: &quot;在路由规则中定义的name属性的值&quot; })</li></ul> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">&quot;路由路径&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 都去 router/index.js定义</span>
    name<span class="token operator">:</span> <span class="token string">&quot;路由名&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>main.js - 路由数组里, 给路由起名字</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">&quot;/find&quot;</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">&quot;Find&quot;</span><span class="token punctuation">,</span>
    component<span class="token operator">:</span> Find
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">&quot;/my&quot;</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">&quot;My&quot;</span><span class="token punctuation">,</span>
    component<span class="token operator">:</span> My
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h5 id="编程式导航-跳转传参"><a href="#编程式导航-跳转传参" class="header-anchor">#</a> 编程式导航 - 跳转传参</h5> <blockquote><p>目标: JS跳转路由, 传参</p></blockquote> <p>语法 query / params(要有<strong>name属性</strong>) 任选 一个</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">&quot;路由路径&quot;</span>
    name<span class="token operator">:</span> <span class="token string">&quot;路由名&quot;</span><span class="token punctuation">,</span><span class="token comment">//params搭配</span>
    query<span class="token operator">:</span> <span class="token punctuation">{</span>
    	<span class="token string">&quot;参数名&quot;</span><span class="token operator">:</span> 值
    <span class="token punctuation">}</span>
    params<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token comment">//要跟name</span>
		<span class="token string">&quot;参数名&quot;</span><span class="token operator">:</span> 值
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// 对应路由接收  this.$route.params.参数名   取值</span>
<span class="token comment">// 对应路由接收  this.$route.query.参数名    取值</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p>==格外注意: 使用path会自动忽略params,要跟name属性传参==</p> <h5 id="硅谷编程式路由导航"><a href="#硅谷编程式路由导航" class="header-anchor">#</a> 硅谷编程式路由导航</h5> <ol><li><p>作用：不借助<code>&lt;router-link&gt;</code>实现路由跳转，让路由跳转更加灵活</p></li> <li><p>具体编码：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//$router的两个API</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
	name<span class="token operator">:</span><span class="token string">'xiangqing'</span><span class="token punctuation">,</span>
		params<span class="token operator">:</span><span class="token punctuation">{</span>
			id<span class="token operator">:</span>xxx<span class="token punctuation">,</span>
			title<span class="token operator">:</span>xxx
		<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
	name<span class="token operator">:</span><span class="token string">'xiangqing'</span><span class="token punctuation">,</span>
		params<span class="token operator">:</span><span class="token punctuation">{</span>
			id<span class="token operator">:</span>xxx<span class="token punctuation">,</span>
			title<span class="token operator">:</span>xxx
		<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//前进</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//后退</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//可前进也可后退</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div></li></ol> <h4 id="二级路由嵌套"><a href="#二级路由嵌套" class="header-anchor">#</a> 二级路由嵌套</h4> <ul><li><p>一级路由path从/开始定义</p></li> <li><p>二级路由往后path直接写名字, 无需/开头</p></li> <li><p>嵌套路由在上级路由的children数组里编写路由信息对象</p></li></ul> <p>配置二级导航和样式</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>router<span class="token operator">-</span>link to<span class="token operator">=</span><span class="token string">&quot;/find/recommend&quot;</span><span class="token operator">&gt;</span>推荐<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>配置路由规则-二级路由展示</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token comment">// ...省略其他</span>
  <span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token string">&quot;/find&quot;</span><span class="token punctuation">,</span>
    name<span class="token operator">:</span> <span class="token string">&quot;Find&quot;</span><span class="token punctuation">,</span>
    component<span class="token operator">:</span> Find<span class="token punctuation">,</span>
          redirect<span class="token operator">:</span><span class="token string">'/index/home'</span><span class="token punctuation">,</span>
    children<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">&quot;recommend&quot;</span><span class="token punctuation">,</span><span class="token comment">//二级路由可以不需要斜杠</span>
        component<span class="token operator">:</span> Recommend
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">&quot;ranking&quot;</span><span class="token punctuation">,</span>
        component<span class="token operator">:</span> Ranking
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// ...省略其他</span>
<span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h5 id="类名区别"><a href="#类名区别" class="header-anchor">#</a> 类名区别</h5> <blockquote><p>目标: router-link自带的2个类名的区别是什么</p></blockquote> <p>观察路由嵌套导航的样式</p> <ul><li><p>router-link-exact-active (默认有的) (精确匹配) url中hash值路径, 与href属性值<strong>完全相同,</strong> 设置此类名</p></li> <li><p><strong>router-link-active</strong>             (模糊匹配) url中hash值,    <strong>包含</strong>href属性值这个路径</p></li></ul> <p>实现切换（active-class可配置高亮样式）</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">&lt;</span>router<span class="token operator">-</span>link active<span class="token operator">-</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">&quot;active&quot;</span> to<span class="token operator">=</span><span class="token string">&quot;/about&quot;</span><span class="token operator">&gt;</span>About<span class="token operator">&lt;</span><span class="token operator">/</span>router<span class="token operator">-</span>link<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="全局前置守卫"><a href="#全局前置守卫" class="header-anchor">#</a> 全局前置守卫</h3> <blockquote><p>目标: 路由跳转之前, 先执行一次前置守卫函数, 判断是否可以正常跳转</p></blockquote> <p>使用例子: 在跳转路由前, 判断用户登陆了才能去&lt;我的音乐&gt;页面, 未登录弹窗提示回到发现音乐页面</p> <ol><li>在路由对象上使用固定方法beforeEach</li></ol> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 目标: 路由守卫</span>
<span class="token comment">// 场景: 当你要对路由权限判断时</span>
<span class="token comment">// 语法: router.beforeEach((to, from, next)=&gt;{//路由跳转&quot;之前&quot;先执行这里, 决定是否跳转})</span>
<span class="token comment">// 参数1: 要跳转到的路由 (路由对象信息)    目标</span>
<span class="token comment">// 参数2: 从哪里跳转的路由 (路由对象信息)  来源</span>
<span class="token comment">// 参数3: 函数体 - next()才会让路由正常的跳转切换, next(false)在原地停留, next(&quot;强制修改到另一个路由路径上&quot;)</span>
<span class="token comment">// 注意: 如果不调用next, 页面留在原地</span>

<span class="token comment">// 例子: 判断用户是否登录, 是否决定去&quot;我的音乐&quot;/my</span>
<span class="token keyword">const</span> isLogin <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">// 登录状态(未登录)</span>
router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> from<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">&quot;/my&quot;</span> <span class="token operator">&amp;&amp;</span> isLogin <span class="token operator">===</span> <span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;请登录&quot;</span><span class="token punctuation">)</span>
    <span class="token function">next</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token comment">// 阻止路由跳转</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 正常放行</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><blockquote><p>总结: next()放行, next(false)留在原地不跳转路由, next(path路径)强制换成对应path路径跳转</p></blockquote> <h3 id="屏蔽重复跳转同路径报错"><a href="#屏蔽重复跳转同路径报错" class="header-anchor">#</a> 屏蔽重复跳转同路径报错</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> originalPush <span class="token operator">=</span> <span class="token class-name">VueRouter</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>push
<span class="token class-name">VueRouter</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">push</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token function">push</span><span class="token punctuation">(</span><span class="token parameter">location</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">originalPush</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> location<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> err<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="meta什么都能存"><a href="#meta什么都能存" class="header-anchor">#</a> meta什么都能存</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">'/index'</span><span class="token punctuation">,</span>
        <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/index.vue'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        meta<span class="token operator">:</span> <span class="token punctuation">{</span>  <span class="token comment">//路由元信息,可以保存内容</span>
            currentindex<span class="token operator">:</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">&quot;token&quot;</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="几个注意点"><a href="#几个注意点" class="header-anchor">#</a> 几个注意点</h4> <ol><li>路由组件通常存放在<code>pages</code>文件夹，一般组件通常存放在<code>components</code>文件夹。</li> <li>通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。</li> <li>每个组件都有自己的<code>$route</code>属性，里面存储着自己的路由信息。</li> <li>整个应用只有一个router，可以通过组件的<code>$router</code>属性获取到。</li></ol> <h3 id="路由的props配置"><a href="#路由的props配置" class="header-anchor">#</a> 路由的props配置</h3> <p>作用：让路由组件更方便的收到参数</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span>
	name<span class="token operator">:</span><span class="token string">'xiangqing'</span><span class="token punctuation">,</span>
	path<span class="token operator">:</span><span class="token string">'detail/:id'</span><span class="token punctuation">,</span>
	component<span class="token operator">:</span>Detail<span class="token punctuation">,</span>

	<span class="token comment">//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件</span>
	<span class="token comment">// props:{a:900}</span>

	<span class="token comment">//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件</span>
	<span class="token comment">// props:true</span>
	
	<span class="token comment">//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件</span>
	<span class="token function">props</span><span class="token punctuation">(</span><span class="token parameter">route</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		<span class="token keyword">return</span> <span class="token punctuation">{</span>
			id<span class="token operator">:</span>route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>id<span class="token punctuation">,</span>
			title<span class="token operator">:</span>route<span class="token punctuation">.</span>query<span class="token punctuation">.</span>title
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="router-link-的replace属性"><a href="#router-link-的replace属性" class="header-anchor">#</a> <code>&lt;router-link&gt;</code>的replace属性</h3> <ol><li>作用：控制路由跳转时操作浏览器历史记录的模式</li> <li>浏览器的历史记录有两种写入方式：分别为<code>push</code>和<code>replace</code>，<code>push</code>是追加历史记录，<code>replace</code>是替换当前记录。路由跳转时候默认为<code>push</code></li> <li>如何开启<code>replace</code>模式：<code>&lt;router-link replace .......&gt;News&lt;/router-link&gt;</code></li></ol> <h3 id="缓存路由组件"><a href="#缓存路由组件" class="header-anchor">#</a> 缓存路由组件</h3> <ol><li><p>作用：让不展示的路由组件保持挂载，不被销毁。</p></li> <li><p>具体编码：</p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>keep-alive</span> <span class="token attr-name">include</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>News<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>  
    //include=&quot;想要缓存的组件名&quot;
    //:include=&quot;[想要缓存的组件名,....]&quot;
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>keep-alive</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div></li></ol> <h3 id="-3"><a href="#-3" class="header-anchor">#</a></h3> <h2 id="vant组件库"><a href="#vant组件库" class="header-anchor">#</a> Vant组件库</h2> <blockquote><p>目标: vant是一个轻量、可靠的移动端 Vue 组件库, 开箱即用</p></blockquote> <p><a href="https://vant-contrib.gitee.io/vant/#/zh-CN/" target="_blank" rel="noopener noreferrer">vant官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p>特点:</p> <ul><li>提供 60 多个高质量组件，覆盖移动端各类场景</li> <li>性能极佳，组件平均体积不到 1kb</li> <li>完善的中英文文档和示例</li> <li>支持 Vue 2 &amp; Vue 3</li> <li>支持按需引入和主题定制</li></ul> <p>下载vant组件库到当前项目中</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> npm i vant
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>导入所有组件, 在main.js中</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Vant <span class="token keyword">from</span> <span class="token string">'vant'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'vant/lib/index.css'</span><span class="token punctuation">;</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vant<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h5 id="手动按需引入"><a href="#手动按需引入" class="header-anchor">#</a> 手动按需引入</h5> <p>目标: 只引入使用的组件</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 方式2: 手动 按需引入</span>
<span class="token keyword">import</span> Button <span class="token keyword">from</span> <span class="token string">'vant/lib/button'</span><span class="token punctuation">;</span> <span class="token comment">// button组件</span>
<span class="token keyword">import</span> <span class="token string">'vant/lib/button/style'</span><span class="token punctuation">;</span> <span class="token comment">// button样式</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Button<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h5 id="自动按需引入"><a href="#自动按需引入" class="header-anchor">#</a> 自动按需引入</h5> <p>安装</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>npm i babel-plugin-import -D
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>在babel配置文件里 (babel.config.js)</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">[</span><span class="token string">'import'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      libraryName<span class="token operator">:</span> <span class="token string">'vant'</span><span class="token punctuation">,</span>
      libraryDirectory<span class="token operator">:</span> <span class="token string">'es'</span><span class="token punctuation">,</span>
      style<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'vant'</span><span class="token punctuation">]</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>全局注册 - 会自动按需引入</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 方式1: 全局 - 自动按需引入vant组件</span>
<span class="token comment">// (1): 下载 babel-plugin-import</span>
<span class="token comment">// (2): babel.config.js - 添加官网说的配置 (一定要重启服务器)</span>
<span class="token comment">// (3): main.js 按需引入某个组件, Vue.use全局注册 - 某个.vue文件中直接使用vant组件</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vant'</span><span class="token punctuation">;</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Button<span class="token punctuation">)</span> <span class="token comment">// Button组件全局注册, 真正注册的组件名VanButton</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="全局过滤器"><a href="#全局过滤器" class="header-anchor">#</a> 全局过滤器</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>main.js文件

过滤器全局注册一:(单)
Vue.filter(过滤器名, 过滤器函数)
import { formatDate } from '@/filters'
Vue.filter('formatDate', formatDate)


过滤器全局注册二:(批量)
import * as filters from '@/filters'

for (const key in filters) {
  Vue.filter(key, filters[key])
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="全局注册组件"><a href="#全局注册组件" class="header-anchor">#</a> 全局注册组件</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>main.js文件
import myComponents from '@/components'
Vue.use(myComponents)

components文件
// 全局组件注册演示
// Vue.component(组件名, 组件对象)
// import Vue from 'vue'
import PageTools from '@/components/PageTools'

export default {
  install(Vue) {
    // 插件安装方法
    // console.log('插件安装方法')
    Vue.component('PageTools', PageTools)
  }
}
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h2 id="全局自定义指令"><a href="#全局自定义指令" class="header-anchor">#</a> 全局自定义指令</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>main.js文件
// 封装全局指令
// Vue.directive(指令名, 指令配置对象)
import { imgerr } from '@/directives'
Vue.directive('imgerr', imgerr)


directives文件
export const imgerr = {
  // 编写元素的钩子
  inserted(el, options) {
    // 这个钩子会在元素插入页面时自动调用
    // 第一个参数可以获取元素本身
    // 第二个参数是配置对象
    // console.log(options)
    el.addEventListener('error', () =&gt; {
      el.src = options.value
    })

    // 另外数据如果为 null 不会触发错误事件, 所以要额外处理
    el.src = el.src || options.value
  },
  // 组件更新后的钩子
  componentUpdated(el, options) {
    el.src = el.src || options.value
  }
}

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><h2 id="路由角色访问权限"><a href="#路由角色访问权限" class="header-anchor">#</a> 路由角色访问权限</h2> <p><img src="C:%5CUsers%5Cethan%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20211019154123224.png" alt="image-20211019154123224"></p> <div class="language-vue line-numbers-mode"><pre class="language-vue"><code>import { constantRoutes, asyncRoutes } from '@/router'
const state = {
  routes: []
}
const mutations = {
  setRoutes(state, data) {
    // data 是筛选过后的有权访问页面
    // 利用原来的静态路由, 加上这个筛选结果
    // 拼接成完整的菜单
    state.routes = [...constantRoutes, ...data]
  }
}
const actions = {
  // 创建过滤路由的函数
  filterRoutes(store, menus) {
    // 在这里过滤路由
    // 这里需要用户的 menus
    // 还需要所有的动态路由配置
    // 经过筛选, 如果路由名称存在于 menus 当中
    // 应该留下, 其他比赛忽略
    const routes = asyncRoutes.filter(item =&gt; menus.includes(item.name))
    // console.log(routes)
    store.commit('setRoutes', routes)
    return routes
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br></div></div><h2 id="全局混入配置对象"><a href="#全局混入配置对象" class="header-anchor">#</a> 全局混入配置对象</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>main.js文件
// 全局混入
// 将一个配置对象混入到所有组件当中, 在所有组件中都能使用
import mixin from '@/mixin'
Vue.mixin(mixin)

mixin文件
export default {
  // 混入是将一个按照 vue 配置规范定义的对象
  // 合并进入其他组件当中, 可以讲一些配置进行提取封装
  methods: {
    checkPermission(pointName) {
      if (!this.$store.state.user.userInfo.roles) {
        return false
      }
      // 这个函数可以传入一个权限标记
      // 通过读取当前员工的 points 数组
      // 返回一个布尔值, 如果有权限则为 true
      return this.$store.state.user.userInfo.roles.points.includes(pointName)
    }
  }
}

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><h2 id="动态组件-2"><a href="#动态组件-2" class="header-anchor">#</a> 动态组件</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>&lt;template&gt;
  &lt;div&gt;
    &lt;ImageUpload /&gt;
    &lt;el-button @click=&quot;name = 'ImageUpload'&quot;&gt;上传图片&lt;/el-button&gt;
    &lt;el-button @click=&quot;name = 'UploadExcel'&quot;&gt;上传Excel&lt;/el-button&gt;

    &lt;component :is=&quot;name&quot; /&gt;
    &lt;!-- &lt;ImageUpload /&gt;
    &lt;UploadExcel /&gt; --&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {

  data() {
    return {
      name: 'ImageUpload'
    }
  }
}
&lt;/script&gt;
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h2 id="全屏插件"><a href="#全屏插件" class="header-anchor">#</a> 全屏插件</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>&lt;template&gt;
  &lt;el-button @click=&quot;screenfull&quot;&gt;全屏&lt;/el-button&gt;
&lt;/template&gt;

&lt;script&gt;
import ScreenFull from 'screenfull'
export default {
  methods: {
    screenfull() {
      if (!ScreenFull.isEnabled) {
        return
      }
      ScreenFull.toggle()
    }
  }
}
&lt;/script&gt;

&lt;style&gt;

&lt;/style&gt;

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h2 id="国际化插件"><a href="#国际化插件" class="header-anchor">#</a> 国际化插件</h2> <div class="language- line-numbers-mode"><pre class="language-text"><code>main.js文件
// 国际化插件的引入
// 引入库
import VueI18n from 'vue-i18n'
// 注册
Vue.use(VueI18n)
// 创建实例
const i18n = new VueI18n()

new Vue({
  el: '#app',
  // 挂载到 new Vue
  i18n,
  render: h =&gt; h(App)
})
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><div class="language- line-numbers-mode"><pre class="language-text"><code>查阅人资
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></div></section> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">1/2/2022, 5:22:04 PM</span></div></footer> <!----> <div class="comments-wrapper"><!----></div> <ul class="side-bar sub-sidebar-wrapper" style="width:12rem;" data-v-cb1513f6><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue-cli脚手架" class="sidebar-link reco-side-vue-cli脚手架" data-v-cb1513f6>@vue/cli脚手架</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#全局安装命令" class="sidebar-link reco-side-全局安装命令" data-v-cb1513f6>全局安装命令</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue-cli-创建项目启动服务" class="sidebar-link reco-side-vue-cli-创建项目启动服务" data-v-cb1513f6>@vue/cli 创建项目启动服务</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#创建项目" class="sidebar-link reco-side-创建项目" data-v-cb1513f6>创建项目</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue-cli-目录和代码分析" class="sidebar-link reco-side-vue-cli-目录和代码分析" data-v-cb1513f6>@vue/cli 目录和代码分析</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue-cli-自定义配置" class="sidebar-link reco-side-vue-cli-自定义配置" data-v-cb1513f6>@vue/cli 自定义配置</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#关闭eslint错误提示" class="sidebar-link reco-side-关闭eslint错误提示" data-v-cb1513f6>关闭eslint错误提示</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#指令" class="sidebar-link reco-side-指令" data-v-cb1513f6>指令</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue指令-v-bind" class="sidebar-link reco-side-vue指令-v-bind" data-v-cb1513f6>vue指令-v-bind</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue指令-v-on" class="sidebar-link reco-side-vue指令-v-on" data-v-cb1513f6>vue指令-v-on</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue指令-v-model" class="sidebar-link reco-side-vue指令-v-model" data-v-cb1513f6>vue指令 v-model</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue指令-v-text和v-html" class="sidebar-link reco-side-vue指令-v-text和v-html" data-v-cb1513f6>vue指令 v-text和v-html</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue指令-v-show和v-if" class="sidebar-link reco-side-vue指令-v-show和v-if" data-v-cb1513f6>vue指令 v-show和v-if</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue指令-v-for" class="sidebar-link reco-side-vue指令-v-for" data-v-cb1513f6>vue指令-v-for</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#动态设置标签类名" class="sidebar-link reco-side-动态设置标签类名" data-v-cb1513f6>动态设置标签类名</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue过滤器-定义使用" class="sidebar-link reco-side-vue过滤器-定义使用" data-v-cb1513f6>vue过滤器-定义使用</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue计算属性-computed" class="sidebar-link reco-side-vue计算属性-computed" data-v-cb1513f6>vue计算属性-computed</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue侦听器-watch" class="sidebar-link reco-side-vue侦听器-watch" data-v-cb1513f6>vue侦听器-watch</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue组件" class="sidebar-link reco-side-vue组件" data-v-cb1513f6>vue组件</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue组件-scoped作用" class="sidebar-link reco-side-vue组件-scoped作用" data-v-cb1513f6>vue组件-scoped作用</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue组件通信" class="sidebar-link reco-side-vue组件通信" data-v-cb1513f6>vue组件通信</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#组件自定义事件" class="sidebar-link reco-side-组件自定义事件" data-v-cb1513f6>组件自定义事件</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#事件总线" class="sidebar-link reco-side-事件总线" data-v-cb1513f6>事件总线</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#eventbus" class="sidebar-link reco-side-eventbus" data-v-cb1513f6>eventBus</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#生命周期" class="sidebar-link reco-side-生命周期" data-v-cb1513f6>生命周期</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#axios请求" class="sidebar-link reco-side-axios请求" data-v-cb1513f6>axios请求</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#nexttick和-refs" class="sidebar-link reco-side-nexttick和-refs" data-v-cb1513f6>$nextTick和$refs</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#props类型的校验" class="sidebar-link reco-side-props类型的校验" data-v-cb1513f6>props类型的校验</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#组件进阶" class="sidebar-link reco-side-组件进阶" data-v-cb1513f6>组件进阶</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#组件插槽" class="sidebar-link reco-side-组件插槽" data-v-cb1513f6>组件插槽</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#自定义指令-注册" class="sidebar-link reco-side-自定义指令-注册" data-v-cb1513f6>自定义指令-注册</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vue-router路由" class="sidebar-link reco-side-vue-router路由" data-v-cb1513f6>vue-router路由</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#-2" class="sidebar-link reco-side--2" data-v-cb1513f6></a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#全局前置守卫" class="sidebar-link reco-side-全局前置守卫" data-v-cb1513f6>全局前置守卫</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#屏蔽重复跳转同路径报错" class="sidebar-link reco-side-屏蔽重复跳转同路径报错" data-v-cb1513f6>屏蔽重复跳转同路径报错</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#meta什么都能存" class="sidebar-link reco-side-meta什么都能存" data-v-cb1513f6>meta什么都能存</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#路由的props配置" class="sidebar-link reco-side-路由的props配置" data-v-cb1513f6>路由的props配置</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#router-link-的replace属性" class="sidebar-link reco-side-router-link-的replace属性" data-v-cb1513f6>`&lt;router-link&gt;`的replace属性</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#缓存路由组件" class="sidebar-link reco-side-缓存路由组件" data-v-cb1513f6>缓存路由组件</a></li><li class="level-3" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#-3" class="sidebar-link reco-side--3" data-v-cb1513f6></a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#vant组件库" class="sidebar-link reco-side-vant组件库" data-v-cb1513f6>Vant组件库</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#全局过滤器" class="sidebar-link reco-side-全局过滤器" data-v-cb1513f6>全局过滤器</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#全局注册组件" class="sidebar-link reco-side-全局注册组件" data-v-cb1513f6>全局注册组件</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#全局自定义指令" class="sidebar-link reco-side-全局自定义指令" data-v-cb1513f6>全局自定义指令</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#路由角色访问权限" class="sidebar-link reco-side-路由角色访问权限" data-v-cb1513f6>路由角色访问权限</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#全局混入配置对象" class="sidebar-link reco-side-全局混入配置对象" data-v-cb1513f6>全局混入配置对象</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#动态组件-2" class="sidebar-link reco-side-动态组件-2" data-v-cb1513f6>动态组件</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#全屏插件" class="sidebar-link reco-side-全屏插件" data-v-cb1513f6>全屏插件</a></li><li class="level-2" data-v-cb1513f6><a href="/ethanBlogs/notes/Vue2/MyVue.html#国际化插件" class="sidebar-link reco-side-国际化插件" data-v-cb1513f6>国际化插件</a></li></ul></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div></div></div>
    <script src="/ethanBlogs/assets/js/app.41cfd4b1.js" defer></script><script src="/ethanBlogs/assets/js/3.30c6e821.js" defer></script><script src="/ethanBlogs/assets/js/1.ff0e4a20.js" defer></script><script src="/ethanBlogs/assets/js/22.4823be3f.js" defer></script>
  </body>
</html>
